<script setup lang="ts">
import { getCardList, getCardInfo, TaskCard } from "@/api/card";
import { ref, onMounted, reactive } from "vue";
import ListCard from "./components/ListCard.vue";

defineOptions({
  name: "CardList"
});

const productList = reactive<Array<TaskCard>>([]);
const product = ref<TaskCard>();
const dataLoading = ref(true);
const pagination = ref({ current: 1, pageSize: 12, total: 0 });

const getCardListData = async () => {
  try {
    const { data } = await getCardList();
    productList.length = 0;
    productList.push(...data.list);

    pagination.value = {
      ...pagination.value,
      total: data.meta.total
    };
  } catch (e) {
    console.log(e);
  } finally {
    setTimeout(() => {
      dataLoading.value = false;
    }, 500);
  }
};

const getCardInfoData = async () => {
  try {
    const { data } = await getCardInfo({ index: 1 });
    product.value = data;
    console.log(product.value);
  } catch (e) {
    console.log(e);
  } finally {
    setTimeout(() => {
      dataLoading.value = false;
    }, 500);
  }
};

const handleDeleteItem = () => {};
const handleManageProduct = () => {};
const onPageSizeChange = (size: number) => {
  pagination.value.pageSize = size;
  pagination.value.current = 1;
};
const onCurrentChange = (current: number) => {
  pagination.value.current = current;
};

onMounted(() => {
  getCardListData();
  getCardInfoData();
});
</script>

<template>
  <div>
    <div class="w-full flex justify-between mb-4">
      <el-button> 新建产品 </el-button>
    </div>
    <div v-loading="dataLoading">
      <el-empty v-show="productList.length === 0" :description="`产品不存在`" />
    </div>
    <template v-if="pagination.total > 0">
      <el-row :gutter="16">
        <el-col
          v-for="(product, index) in productList"
          :key="index"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          :xl="4"
        >
          <ListCard
            :product="product"
            @delete-item="handleDeleteItem"
            @manage-product="handleManageProduct"
          />
        </el-col>
      </el-row>
      <el-pagination
        v-model:currentPage="pagination.current"
        class="float-right"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        :background="true"
        layout="prev, pager, next"
        @current-change="onCurrentChange"
      />
    </template>
  </div>
</template>
